<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>serviceConfig页面</title>
    <link rel="stylesheet" href="../../static/css/default.css">
    <link rel="stylesheet" href="../../static/css/plujins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <!--    <link rel="stylesheet" href="../../static/css/signin.css">-->
    <!--    <link rel="stylesheet" href="../../static/css/loginBootstrap.css">-->
    <script src="../../static/script/jquery-3.6.0.min.js"></script>
    <script src="../../static/css/plujins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--    <script src="../../static/script/tools.js"></script>-->


    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }

    </style>
    <script>
        $(function () {
            $("#username").blur(function () {//失去焦点行为
                //$(this).val();
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>userServlet?action=ajaxExistUsername",
                    data: $('form').serialize(), //它可以把表单用name序列化成一个字符串
                    success: function (response, status, xhr) {
                        //console.log(response)
                        var jsonObj = JSON.parse(response);
                        //var jsonObj=$.parseJSON( response )
                        //console.log(typeof (jsonObj));
                        //console.log(jsonObj["existsUsername"]);//js中的json对象要这样读
                        if (jsonObj["existsUsername"]) {
                            $(".errorMsg").text("用户名不可用")
                        } else {
                            $(".errorMsg").text("用户名可用")
                        }
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用
                })
            })
        })
    </script>
</head>
<body>

<div class="container-fluid ">
    <div class="center-block" >
        <div class="row" style="background: black;color: white;font-size: 18px;height: 30px;line-height: 30px">
            <strong class="col-md-2 " style="padding-left: 50px;font-size: 24px">CMDB</strong>
            <div class="col-md-5 col-md-offset-5">
                <div class="col-md-4 col-md-offset-6">
                    欢迎, <a href="#">admin</a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="btn btn-info btn-sm" style="height: 28px">退出</a>
                </div>

            </div>
        </div>
    </div>
    <div class="center-block" >
        <ul class="nav nav-tabs">
            <li class=" col-md-2" style="padding: 0;text-align: center"><a href="#" class="col-md-12 " style=";font-size: 24px">服务器</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">docker</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">vm</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">nginx代理记录</a></li>
            <li class=" col-md-2" style="padding: 0;text-align: center "><a href="#" style=";font-size: 24px">服务依赖记录</a></li>
        </ul>
    </div>
    <div class="center-block" >
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px ;background: #46b8da">
                <li class="text-center"><a href="#" >服务</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">docker内服务</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">vm内服务</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">nginx代理拓扑</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="breadcrumb" style="height: 35px">
                <li class="text-center"><a href="#">服务依赖拓扑</a></li>
            </ul>
        </div>
    </div>
</div> <!--欢迎行-->

<div class="container-fluid " > <!--table行-->
    <table class="table table-striped table-bordered table-hover hidden " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <!--                <th>图标</th>-->
            <th class="col-md-1">名称</th>
            <th class="col-md-1">ip</th>
            <th class="col-md-1">服务 / 容器</th>
            <th class="col-md-1">cpu / memory</th>
            <th class="col-md-1">disk</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-1 text-center">操作
                <a class="btn btn-default btn-sm glyphicon glyphicon-plus" href="#"></a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="tr">
            <td>
                <input type="checkbox">
                1
            </td>
            <td class="id">1</td>
            <td class="name">济宁</td>
            <td class="ip">1.1.1.1</td>
            <td class="objectChild">
                <form class="bs-example bs-example-form dropdownAndInputForm" role="form">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group ">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="text">一级</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdownAndInput">
                                        <li>
                                            <a  class="option">nginx</a>
                                        </li>
                                        <li>
                                            <a  class="option">php</a>
                                        </li>
                                        <li>
                                            <a  class="option">mysql</a>
                                        </li>
                                        <li>
                                            <a  class="option">docker</a>
                                        </li>
                                        <li>
                                            <a  class="option">kvm</a>
                                        </li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="changeDiv "  style="width: 150px">
                                    <input  type="text" class="form-control input" >
                                </div><!--/chengrDiv-->
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </td>
            <td class="cpuAndMemory">4c / 4G</td>
            <td class="disk">500G</td>
            <td class="endTime">2020-1-1</td>
            <td class="function">
                <div class="btn-group center-block center-block">
                    <a class="btn btn-default glyphicon glyphicon-pencil edit" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-ok update" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-remove delete" href="#"></a>
                </div>
            </td>
        </tr>
        </tbody>
    </table><!--废弃的服务器表-->
    <table class="table table-striped table-bordered table-hover " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall2" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <th class="col-md-1">服务器</th>
            <th class="col-md-1">名称</th>
            <th class="col-md-1">version</th>
            <th class="col-md-1">port</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-1">custorm</th>
            <th class="col-md-2 text-center detail " >操作
                <a class="btn btn-default btn-sm glyphicon glyphicon-plus create" href="#"></a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="tr">
            <td>
                <input type="checkbox">
                <span class="number">1</span>
            </td>
            <td class="id">1</td>
            <td class="server">济宁</td>
            <td class="name">nginx</td>
            <td class="version">16</td>
            <td class="port">80,443</td>
            <td class="endTime">2020-1-1</td>
            <td class="custorm">济宁</td>
            <td class="detail">
                <div class="btn-group">
                    <a class="btn btn-default glyphicon glyphicon-pencil edit" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-ok update" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-remove delete" href="#"></a>
                    <a class="btn btn-default glyphicon glyphicon-wrench config" href="#"></a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="col-md-12">
        <form action="#" class="form-horizontal ">
            <label for="config">config:</label><textarea name="config" id="config" cols="10" rows="20" class="form-control"></textarea>
            <input type="submit" class="btn btn-default col-lg-1 col-lg-offset-11">
        </form>
    </div>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form"> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a  class="option">php</a>
                            </li>
                            <li>
                                <a  class="option">mysql</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input  type="text" class="form-control input"  style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true"><!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true"><!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->

</div> <!--table行-->
</body>
<script>
    $("table").click(function (event){//detail 操作模块的点击事件,利用冒泡
        let eventTarget=$(event.target);
        if(eventTarget.hasClass('edit')){//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
            let trObj=eventTarget.closest(".tr");//下一步,把tr每一项作为input,等待修改:策略->"td不多,根据class获取td;根据td.innhtml获取text,作为input的value"
            trObj.children().each(function (index,element){
                let inputCreate=document.createElement("input");
                inputCreate.className="form-control"
                switch ($(element).attr("class")){
                    case "id":
                        inputCreate.classList.add("idEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "server":
                        inputCreate.classList.add("serverEdit");
                        inputCreate.value=$(element)[0].innerHTML;
                        $(element).html('').append(inputCreate);
                        break;
                    case "name":
                        inputCreate.classList.add("nameEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "version":
                        inputCreate.classList.add("versionEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "port":
                        inputCreate.classList.add("portEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "endTime":
                        inputCreate.classList.add("endTimeEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    default:
                    // console.log('default')
                }
            })
        }//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
        if(eventTarget.hasClass('create')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
            if(eventTarget.closest("table").children("tbody").children("tr:last").find(".form-control:first").hasClass("idEdit")){
                confirm("修改状态下不允许添加")
            }else{
                let newEle=eventTarget.closest("table").children("tbody").children("tr:last").clone()
                $(newEle).find(".number:first").html(parseInt(($(newEle).find(".number:first").html()))+1);
                $(newEle).children(".id").html(parseInt(($(newEle).children(".id").html()))+1);
                eventTarget.closest("table").children("tbody").append(newEle);
            }
        }//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
        if(eventTarget.hasClass('update')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("idEdit")){
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }else{
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if(eventTarget.hasClass('delete')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("idEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                $("#delete").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡
    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        console.log(1)
        let eventTarget=$('.yaotijiaodedian')
        let trObj = {};
        let arr = ["id", "server", "name", "version", "port", "endTime"];
        eventTarget.closest("tr").find("input").each(function (index, element) { //构建tr-json对象
            //如果有idEdit,就为id赋值
            // if ($(element).hasClass("idEdit")){
            //     trObj["id"]=$(element).val()
            // }
            for (let i in arr) { //不写这个就要把上面的这个if写5次
                if ($(element).hasClass(arr[i] + "Edit")) {
                    trObj[arr[i]] = $(element).val()
                }
            }//不写这个就要把上面的这个if写5次
        })//构建tr-json对象
        console.log(trObj)
        $.ajax({
            type: "post",
            url: "<%=basepath%>serviceServlet?action=ajaxAddItem",
            data: trObj,
            success: function (response, status, xhr) {
                console.log("收到回信")
                //console.log(response)
                var jsonObj = JSON.parse(response);
                var jsonObj = $.parseJSON(response)
                //console.log(typeof (jsonObj));
                //console.log(jsonObj["goodsName"]);//js中的json对象要这样读
                //jsonObj["count"]
                $("#cartCount").text("您的购物车中有" + jsonObj["count"] + "件商品");
                console.log("书名是:" + jsonObj["goodsName"])
                $("#welcomeAddCartItem").html("您刚刚将<span style=\"color: red\" >" + jsonObj["goodsName"] + "</span>加入到了购物车中")

            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget=$('.yaotijiaodedian')
        let trObj=eventTarget.closest(".tr");
        $.ajax({
            type:"post",
            url:"<%=basepath%>serviceServlet?action=ajaxDeleteItem",
            data:{"id":trObj.children(".id:first").html()},
            success:function (response,status,xhr) {
                console.log("收到回信")
                //console.log(response)
                var jsonObj=JSON.parse(response);
                var jsonObj=$.parseJSON( response )
                //console.log(typeof (jsonObj));
                //console.log(jsonObj["goodsName"]);//js中的json对象要这样读
                //jsonObj["count"]
                $("#cartCount").text("您的购物车中有"+jsonObj["count"]+"件商品");
                console.log("书名是:"+jsonObj["goodsName"])
                $("#welcomeAddCartItem").html("您刚刚将<span style=\"color: red\" >"+jsonObj["goodsName"]+"</span>加入到了购物车中")

            },
            timeout:10000, //如果超时1000毫秒，就结束
            error:function (xhr,errorText,errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:"+errorText); //error
                console.log("errorType:"+errorType); //not found
                console.log("xhr.status:"+xhr.status); //404
                console.log("xhr.statusText:"+xhr.statusText); //not found
            },
            dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是删除的模态框点击了确定键后搜索数据并提交的过程
    $('.objectChild').click(function (event){
        if($(event.target).hasClass("option")){//这是确定了点击的是ul-li-a
            let htmlText=$(event.target).html();
            if(htmlText=="docker"||htmlText=="kvm"){
                let changeTargetObj=$(".changeTarget")//数据源
                changeTargetObj.find('.text').html(htmlText)//替换数据源中显示的标题为docker或kvm
                $(".changeDiv").html(changeTargetObj.html())//把数据源赋值给目标区域
            }else{//如果这个a标签的内容不是docker或kvm,就可以把a的内容赋值给input
                $(event.target).closest('.dropdownAndInputForm').find('.input').val(htmlText)

                let virtualType=$(event.target).closest('.input-group-btn').find('.text').html()
                $(event.target).closest('.dropdownAndInputForm').find('.input').attr("virtualType",virtualType)
            }
        }else{
        }
    })//这是下拉菜单+input的点击事件,临时不用
</script><!--表格点击事件-->
<script type="text/javascript">
    // 页面加载完成之后
    $(function () {
        // 给注册绑定单击事件
        $("#sub_btn").click(function () {
            // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
            //1 获取用户名输入框里的内容
            var usernameText = $("#username").val();
            //2 创建正则表达式对象
            var usernamePatt = /^\w{5,12}$/;
            //3 使用test方法验证
            if (!usernamePatt.test(usernameText)) {
                //4 提示用户结果
                $("span.errorMsg").text("用户名不合法！");

                return false;
            }

            // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
            //1 获取用户名输入框里的内容
            var passwordText = $("#password").val();
            //2 创建正则表达式对象
            var passwordPatt = /^\w{5,12}$/;
            //3 使用test方法验证
            if (!passwordPatt.test(passwordText)) {
                //4 提示用户结果
                $("span.errorMsg").text("密码不合法！");

                return false;
            }

            // 验证确认密码：和密码相同
            //1 获取确认密码内容
            var repwdText = $("#repwd").val();
            //2 和密码相比较
            if (repwdText != passwordText) {
                //3 提示用户
                $("span.errorMsg").text("确认密码和密码不一致！");

                return false;
            }

            // 邮箱验证：xxxxx@xxx.com
            //1 获取邮箱里的内容
            var emailText = $("#email").val();
            //2 创建正则表达式对象
            var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
            //3 使用test方法验证是否合法
            if (!emailPatt.test(emailText)) {
                //4 提示用户
                $("span.errorMsg").text("邮箱格式不合法！");

                return false;
            }

            // 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
            var codeText = $("#code").val();

            //去掉验证码前后空格
            // alert("去空格前：["+codeText+"]")
            codeText = $.trim(codeText);
            // alert("去空格后：["+codeText+"]")

            if (codeText == null || codeText == "") {
                //4 提示用户
                $("span.errorMsg").text("验证码不能为空！");

                return false;
            }

            // 去掉错误信息
            $("span.errorMsg").text("");

        });

    });

</script> <!--页面加载完成之后-->
</html>